<template>
  <!-- 功能配置  -->
  <div class="menu-page">
    <div id="menu-config">
      <div id="menu-config-table">
        <el-table
            :data="funcData"
            style="width: 100%; margin-bottom: 20px"
            highlight-current-row
        >
          <el-table-column label="功能名" width="200px">
            <template #default="scope">
              <el-icon>
                <FuncRouterIcon/>
              </el-icon>
              {{ scope.row.name}}
            </template>
          </el-table-column>
          <el-table-column prop="method" label="请求类型" width="100px"/>
          <el-table-column label="状态" width="100px">
            <template #default="ctx">
              <el-switch v-model="ctx.row.status"
                         @click.stop
                         @change="modifyStatus(ctx.row)"
                         active-text="启用"
                         inactive-text="禁用"
                         inline-prompt
              />
            </template>
          </el-table-column>
          <el-table-column label="路径">
            <template #default="scope">
              <span class="func-path">{{ scope.row.path ===''?'group':scope.row.path }}</span>
<!--              {{ scope.row.empty.path }}-->
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="200px">
            <template #default="ctx">
              <el-button icon="Edit" link type="warning"/>
              <el-popconfirm :title="'你确定要删除 \''+ctx.row.name+'\' 功能吗?'"
                             @confirm="confirmEvent(ctx.row)"
                             @cancel="cancelEvent"
              >
                <template #reference>
                  <el-button icon="Delete" link type="danger"/>
                </template>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
        <el-button link type="primary" style="width: 100%;margin-bottom: 10px" @click="OpenAdd(null)">添加功能
        </el-button>
      </div>
    </div>
    <el-dialog
        v-model="addflag"
        width="30%"
        append-to-body
        draggable
        title="添加菜单项"
        style="border-radius: 10px"
    >
      <el-form
          label-width="50px"
          label-position="left"
          :model="funcInfo"
          style="max-width: 460px"
      >
        <el-form-item label="类型">
          <el-select
              v-model="funcInfo.type"
              value-key="value"
              placeholder="类型"
          >
            <el-option v-for="v in rt" :label="v.label" :value="v" :key="v.value"/>
          </el-select>
        </el-form-item>
        <el-form-item label="功能">
          <el-input v-model="funcInfo.name" placeholder="功能名称"/>
        </el-form-item>
        <el-form-item label="路径">
          <el-input v-model="funcInfo.path" placeholder="路由路径"/>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button type="primary" @click="Add">添加</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">

import {onMounted, ref} from "vue";
import Axios from "../../../plugins/axios";
import {ElMessage} from "element-plus";
import {sys} from "../../../model/system";
import event from "../../../plugins/event";
import {UpdateMenu} from "../../../plugins/evenKey";

const funcData = ref<any>([])       // 表格数据
const addflag = ref(false)          // 打开添加对话框标识符
const CurrentRow = ref<any>(null)   // 记录当前操作行

// menuInfo 添加菜单表单信息
const funcInfo = ref({
  name: '',// 路由名称
  path: '',// 菜单路由路径 此处的菜单管理基于 菜单工具蓝 /index/ 开头的路径
  type: {
    label: '',
    value: 0
  }, // 菜单类型 可选类型是 分组 或者 菜单项
  status: false
})

// 菜单类型
const rt = [
  {label: 'GET', value: 0},
  {label: 'POST', value: 1},
  {label: 'PUT', value: 2},
  {label: 'DELETE', value: 3}
]

// menuOld 记录 切换类型的中间变量
const menuOld = ref()


// 打开添加窗口
function OpenAdd(row) {
  funcInfo.value = {
    name: '',// 路由名称
    path: '',// 菜单路由路径 此处的菜单管理基于 菜单工具蓝 /index/ 开头的路径
    type: {
      label: 'GET',
      value: 0
    }, // 菜单类型 可选类型是 分组 或者 菜单项
    status: false
  }
  addflag.value=!addflag.value
}

// 执行添加
function Add() {
  console.log(funcInfo.value)
  let method=funcInfo.value.type.label
  let name=funcInfo.value.name
  let path=funcInfo.value.path
  Axios.post('/api/configuration/func/add',{
    Method:method,
    Name:name,
    Path:path
  }).then(response=>{
    let data:sys.Result<any> =response.data
    if (data.code==='0000'){
      ElMessage({
        type:'success',
        message:'添加成功'
      })
      init()
    }
  })
  addflag.value = !addflag.value
}

const confirmEvent = (row) => {
  Axios.post('/api/configuration/func/del',{
    funcId:row.id
  }).then(response=>{
    let data:sys.Result<any> =response.data
    if (data.code==='0000'){
      ElMessage({
        type:'success',
        message:'删除成功'
      })
     init()
    }
  })
}
const cancelEvent = () => {
  console.log('cancel!')
}


// 状态修改 ，强制限制不能禁用系统配置及其子配置项  row.empty.pid === 9 来源于数据库初始化 id
function modifyStatus(row) {
  let id=row.id
  let status=row.status
  Axios.post('/api/configuration/func/update/status',{
    Id:id,
    Status:status
  }).then(response=>{
    let data:sys.Result<any> =response.data
    if (data.code==='0000'){
      ElMessage({
        type:'success',
        message:'修改成功'
      })
      init()
    }
  })
}

function init() {
  Axios.get('/api/configuration/func/list').then(rep => {
    let data:sys.Result<sys.FuncRouter[]> = rep.data
    if (data.code === "0000") {
      funcData.value=data.data
    }
  })
}

onMounted(init)

</script>

<style scoped>
#menu-config {
  width: 100%;
  display: flex;
  flex-direction: column;
}

#menu-config-table {
  width: 97%;
  margin: auto;
  height: 700px;
  background-color: white;
  box-shadow: var(--el-box-shadow-light);
}
.func-path{
  background-color: rgba(218, 205, 205, 0.92);
  border-radius: 10px;
  color: #ffffff;
  padding: 5px;
}
</style>